<template>
  <div class="home">

    <el-row>
      <el-col :span="4" :offset='1'>
        <div class="grid-content bg-purple"><i class="el-icon-office-building"></i>商品分类</div>
        <el-menu background-color="#FC5531" text-color="#373737" active-text-color='#f7f7f7'>

          <el-menu-item v-for="(item) in categoryList" :key="item.cate_id" :index="item.cate_id.toString()" @click="gotosearch(item.cate_id)">
            <i :class="item.cate_icon"></i>{{item.cate_name}}
          </el-menu-item>

        </el-menu>

      </el-col>
      <!-- //轮播图 -->

      <el-col :span="14">
        <el-carousel>
          <el-carousel-item v-for="(item) in  homecasual" :key="item.id" class="a">
            <img :src="item.imgurl" alt="">

          </el-carousel-item>
        </el-carousel>

      </el-col>

      <el-col :span="4" class="loginright">
        <div class="home-right" v-if="!userinfo.id">
          <img src="./img/no_login.jpg" alt="">
        </div>
        <div class="home-right" v-else>
          <img src="/images/马里奥.png" alt="">
        </div>
        <div class="right-login">
          <p>hi~ 欢迎来到oi商城</p>
          <a @click="goto" v-if="!userinfo.id">登录</a>
          <a @click="goto" v-if="!userinfo.id">注册</a><br>
          <button @click="gotovip">新人福利</button>
          <button @click="gotovip">加入会员</button>
        </div>

      </el-col>
    </el-row>
    <div>
    </div>

    <div class="container">
      <div v-for="i in categoryList" :key="i.cate_id">
        <h3>{{i.cate_name}} <a><strong>MORE</strong></a></h3>
        <div class="containerinfo">
          <Shopitem v-for="list in shoplist[i.cate_id-1]" :key="list.goods_id" class="info" :list='list'></Shopitem>
        </div>

      </div>

    </div>

    <div class="footer">
      <img src="./img/footer.png" alt="">
    </div>
    <homeright class="shopright"></homeright>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import Shopitem from '@/components/shopitem.vue'

import Homeright from './homeright.vue'

export default {
  components: {
    Shopitem,
    Homeright
  },

  computed: {
    ...mapGetters(['homecasual']),
    ...mapGetters(['categoryList']),
    ...mapGetters(['shoplist']),

    ...mapGetters(['userinfo'])
  },

  methods: {
    //登录
    goto() {
      if (!this.userinfo.id) {
        this.$router.push('/login')
      }
    },
    gotovip() {
      if (this.userinfo.id) {
        this.$message({
          type: 'success',
          message: '不好意思,尊贵的oi用户活动已经下架,期待下次上线'
        }).catch(() => {})
      } else {
        this.$message({
          type: 'waring',
          message: '请先登录'
        })
      }
    },
    // 轮播图旁边的商品分类
    gotosearch(cate_id) {
      this.$router.push('/search/' + cate_id + '/1')
    }
  },
  mounted() {
    this.$store.dispatch('gethome')
    this.$store.dispatch('getcate')
    this.$store.dispatch('getlist')
  }
}
</script>

<style scoped lang='less'>
.home {
  .grid-content {
    height: 30px;
    background: #eb4747;
    text-align: center;
    line-height: 30px;
    color: #e3e3e3;
    vertical-align: middle;
    i {
      margin-right: 5px;
      vertical-align: middle;
    }
  }
  .loginright {
    height: 310px;
    border: 1px solid #f7f7f7;
    .home-right {
      img {
        height: 100px;
        width: 100px;
        margin-top: -20px;
        margin-left: 30px;
        border-radius: 50%;
        box-shadow: 3px 3px 5px 5px #e3e3e3;
      }
    }
    .right-login {
      margin-top: 30%;
      text-align: center;
      p {
        margin-bottom: 10px;
      }

      a {
        margin-right: 10px;
        margin-top: 10px;
        &:hover {
          color: red;
        }
      }
      button {
        width: 80px;
        border-radius: 10px;
        margin: 10px;
        border: 0;
        &:nth-last-child(1) {
          border: 1px solid black;
          background: black;
          color: #e5d790;
        }
        &:nth-of-type(1) {
          color: red;
        }
      }
    }
  }
  .footer {
    width: 100%;
    background: #f0f3ef;
    text-align: center;
  }
  .container {
    width: 100%;

    margin-top: 40px;
    h3 {
      text-align: center;
    }
    .containerinfo {
      display: flex;
      .info {
        &:first-child {
          margin-left: 25%;
        }
      }
    }
  }
  .a {
    text-align: center;
  }
}
</style>